<template>
    <div class="player-container" :class="{ 'red-team': props.item.team === 'red' }" :style="containerStyle">
        <img class="avatar" :style="avatarStyle" :src="item.avatar" />
        <span>
            <div class="playerName" :style="textContainerStyle" ref="playerNameRef">
                <span class="player-name-text" :style="textStyle">{{ props.item.prefix + item.player_name }}</span>
            </div>
            <div v-if="props.item.progress > -1" class="progressBar" :style="progressBarStyle">
                <div class="progress-fill" :style="{ width: progressWidth }"></div>
            </div>
            <div class="life-text" :class="{ 'red-text': props.item.team === 'red' }" :style="textContainerStyle"
                ref="lifeTextRef">
                <span class="life-text-content" :style="textStyle">{{ item.content }}</span>
            </div>
        </span>
    </div>
</template>

<script setup>
import { defineProps, ref, onMounted, onUnmounted, computed } from 'vue';

const props = defineProps({
    item: {
        type: Object,
        required: true,
        default: () => ({
            player_name: '默认玩家名',
            avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
            content: '这是文本',
            progress: -1,
            team: 'blue',
            prefix: '',
        }),
    },
    scale: {
        type: Number,
        default: 1,
    },
});

const playerNameRef = ref(null);
const lifeTextRef = ref(null);
let scrollInterval = null;
let lifeScrollInterval = null;

// 玩家框样式
const containerStyle = computed(() => {
    const s = props.scale;
    return {
        width: `150px`,
        padding: `${2 * s}px`,
        marginBottom: `${1 * s}px`,
        borderWidth: `${2 * s}px`,
    };
});

// 头像样式
const avatarStyle = computed(() => {
    const s = props.scale;
    return {
        width: `${35 * s}px`,
        height: `${35 * s}px`,
    };
});

// 文本容器样式
const textContainerStyle = computed(() => {
    const s = props.scale;
    return {
        height: `${18 * s}px`,
        lineHeight: `${18 * s}px`,
        width: `110px`,
    };
});

// 文本样式
const textStyle = computed(() => {
    const s = props.scale;
    return {
        fontSize: `${10 * s}px`,
    };
});

// 进度条样式
const progressBarStyle = computed(() => {
    const s = props.scale;
    return {
        height: `${5 * s}px`,
    };
});

// 进度条填充宽度（范围 0 到 100）
const progressWidth = computed(() => {
    return `${Math.max(0, Math.min(100, props.item.progress))}%`;
});

const startScrolling = (element, className) => {
    if (!element) return null;

    const textElement = element.querySelector(className);
    if (!textElement) return null;

    if (textElement.scrollWidth <= element.clientWidth) return null;

    let scrollPosition = 0;
    const scrollStep = 0.9 * props.scale; // 按比例调整滚动速度
    const scrollDelay = 60;
    const pauseDelay = 2000;

    const scroll = () => {
        scrollPosition += scrollStep;
        textElement.style.transform = `translateX(-${scrollPosition}px)`;

        if (scrollPosition >= textElement.scrollWidth - element.clientWidth) {
            clearInterval(interval);
            setTimeout(() => {
                scrollPosition = 0;
                textElement.style.transform = `translateX(0px)`;
                setTimeout(() => {
                    interval = setInterval(scroll, scrollDelay);
                }, pauseDelay);
            }, pauseDelay);
        }
    };

    let interval = setInterval(scroll, scrollDelay);
    return interval;
};

onMounted(() => {
    if (playerNameRef.value) {
        scrollInterval = startScrolling(playerNameRef.value, '.player-name-text');
    }
    if (lifeTextRef.value) {
        lifeScrollInterval = startScrolling(lifeTextRef.value, '.life-text-content');
    }
});

onUnmounted(() => {
    if (scrollInterval) clearInterval(scrollInterval);
    if (lifeScrollInterval) clearInterval(lifeScrollInterval);
});
</script>

<style scoped lang="less">
.player-container {
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 5px;
    border: 2px solid #4a90e2;
    color: white;
    font-family: 'Arial', sans-serif;
}

.avatar {
    border-radius: 3px;
    object-fit: cover;
}

.playerName {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    position: relative;
    text-align: center;

    .player-name-text {
        white-space: nowrap;
        display: inline-block;
        transition: transform 0.05s linear;
    }
}

.progressBar {
    width: 100%;
    background-color: #333;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    border-radius: 2px;
    margin: 2px 0;
}

.progress-fill {
    height: 100%;
    background-color: white;
    transition: width 0.3s ease;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

.life-text {
    font-weight: bold;
    color: #4a90e2;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    position: relative;

    .life-text-content {
        white-space: nowrap;
        display: inline-block;
        transition: transform 0.05s linear;
    }
}

.player-container.red-team {
    border: 2px solid #e24a4a;
    flex-direction: row-reverse;
}

.red-team .avatar {
    order: -1;
}

.life-text.red-text {
    color: #e24a4a;
}
</style>